<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>麻将</title>
    <style>
        .box {
            height: 260px;
            width: 595px;
            margin: auto;
        }
        
        .box1 {
            position: relative;
            float: left;
            height: 210px;
            width: 165px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        
        .box2 {
            position: relative;
            float: left;
            height: 210px;
            width: 165px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        
        .box3 {
            position: relative;
            float: left;
            height: 210px;
            width: 165px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        
        .box4 {
            position: relative;
            float: left;
            height: 210px;
            width: 165px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        
        .box5 {
            position: relative;
            float: left;
            height: 210px;
            width: 165px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        
        .box6 {
            position: relative;
            float: left;
            height: 210px;
            width: 165px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        
        .box7 {
            position: relative;
            float: left;
            height: 210px;
            width: 165px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        
        .box8 {
            position: relative;
            float: left;
            height: 210px;
            width: 165px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        
        .box9 {
            position: relative;
            float: left;
            height: 210px;
            width: 165px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        
        .box11 {
            position: absolute;
            top: 24%;
            left: 19%;
            height: 100px;
            width: 100px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box21 {
            position: absolute;
            top: 12%;
            left: 32%;
            height: 53px;
            width: 53px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box22 {
            position: absolute;
            top: 63%;
            left: 32%;
            height: 53px;
            width: 53px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box31 {
            position: absolute;
            top: 12%;
            left: 9%;
            height: 53px;
            width: 53px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box32 {
            position: absolute;
            top: 38%;
            left: 33%;
            height: 53px;
            width: 53px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box33 {
            position: absolute;
            top: 63%;
            left: 56%;
            height: 53px;
            width: 53px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box41 {
            position: absolute;
            top: 12%;
            left: 9%;
            height: 53px;
            width: 53px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box42 {
            position: absolute;
            top: 12%;
            left: 56%;
            height: 53px;
            width: 53px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box43 {
            position: absolute;
            top: 63%;
            left: 9%;
            height: 53px;
            width: 53px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box44 {
            position: absolute;
            top: 63%;
            left: 56%;
            height: 53px;
            width: 53px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box51 {
            position: absolute;
            top: 12%;
            left: 9%;
            height: 53px;
            width: 53px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box52 {
            position: absolute;
            top: 12%;
            left: 56%;
            height: 53px;
            width: 53px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box53 {
            position: absolute;
            top: 38%;
            left: 33%;
            height: 53px;
            width: 53px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box54 {
            position: absolute;
            top: 63%;
            left: 9%;
            height: 53px;
            width: 53px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box55 {
            position: absolute;
            top: 63%;
            left: 56%;
            height: 53px;
            width: 53px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box61 {
            position: absolute;
            top: 12%;
            left: 22%;
            height: 43px;
            width: 43px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box62 {
            position: absolute;
            top: 12%;
            left: 49%;
            height: 43px;
            width: 43px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box63 {
            position: absolute;
            top: 45.5%;
            left: 22%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box64 {
            position: absolute;
            top: 45.5%;
            left: 49%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box65 {
            position: absolute;
            top: 67%;
            left: 22%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box66 {
            position: absolute;
            top: 67%;
            left: 49%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box71 {
            position: absolute;
            top: 6%;
            left: 8%;
            height: 43px;
            width: 43px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box72 {
            position: absolute;
            top: 11%;
            left: 34.3%;
            height: 43px;
            width: 43px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box73 {
            position: absolute;
            top: 17%;
            left: 60%;
            height: 43px;
            width: 43px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box74 {
            position: absolute;
            top: 45.5%;
            left: 20%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box75 {
            position: absolute;
            top: 45.5%;
            left: 47%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box76 {
            position: absolute;
            top: 67%;
            left: 20%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box77 {
            position: absolute;
            top: 67%;
            left: 47%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box81 {
            position: absolute;
            top: 8%;
            left: 20%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box82 {
            position: absolute;
            top: 8%;
            left: 47%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box83 {
            position: absolute;
            top: 29%;
            left: 20%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box84 {
            position: absolute;
            top: 29%;
            left: 47%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box85 {
            position: absolute;
            top: 50%;
            left: 20%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box86 {
            position: absolute;
            top: 50%;
            left: 47%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box87 {
            position: absolute;
            top: 71%;
            left: 20%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box88 {
            position: absolute;
            top: 71%;
            left: 47%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box91 {
            position: absolute;
            top: 12%;
            left: 10%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box92 {
            position: absolute;
            top: 12%;
            left: 37%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box93 {
            position: absolute;
            top: 12%;
            left: 64%;
            height: 43px;
            width: 43px;
            border: 1px solid blue;
            border-radius: 50%;
            background-color: blue;
        }
        
        .box94 {
            position: absolute;
            top: 39%;
            left: 10%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box95 {
            position: absolute;
            top: 39%;
            left: 37%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box96 {
            position: absolute;
            top: 39%;
            left: 64%;
            height: 43px;
            width: 43px;
            border: 1px solid red;
            border-radius: 50%;
            background-color: red;
        }
        
        .box97 {
            position: absolute;
            top: 66%;
            left: 10%;
            height: 43px;
            width: 43px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box98 {
            position: absolute;
            top: 66%;
            left: 37%;
            height: 43px;
            width: 43px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .box99 {
            position: absolute;
            top: 66%;
            left: 64%;
            height: 43px;
            width: 43px;
            border: 1px solid rgb(3, 117, 3);
            border-radius: 50%;
            background-color: rgb(3, 117, 3);
        }
        
        .banner1 {
            clear: both;
        }
        
        .banner2 {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            <div class="box11"></div>
        </div>
        <div class="box2">
            <div class="box21"></div>
            <div class="box22"></div>
        </div>
        <div class="box3">
            <div class="box31"></div>
            <div class="box32"></div>
            <div class="box33"></div>
        </div>
        <p class="banner1"></p>
        <div class="box4">
            <div class="box41"></div>
            <div class="box42"></div>
            <div class="box43"></div>
            <div class="box44"></div>
        </div>
        <div class="box5">
            <div class="box51"></div>
            <div class="box52"></div>
            <div class="box53"></div>
            <div class="box54"></div>
            <div class="box55"></div>
        </div>
        <div class="box6">
            <div class="box61"></div>
            <div class="box62"></div>
            <div class="box63"></div>
            <div class="box64"></div>
            <div class="box65"></div>
            <div class="box66"></div>
        </div>
        <p class="banner2"></p>
        <div class="box7">
            <div class="box71"></div>
            <div class="box72"></div>
            <div class="box73"></div>
            <div class="box74"></div>
            <div class="box75"></div>
            <div class="box76"></div>
            <div class="box77"></div>
        </div>
        <div class="box8">
            <div class="box81"></div>
            <div class="box82"></div>
            <div class="box83"></div>
            <div class="box84"></div>
            <div class="box85"></div>
            <div class="box86"></div>
            <div class="box87"></div>
            <div class="box88"></div>
        </div>
        <div class="box9">
            <div class="box91"></div>
            <div class="box92"></div>
            <div class="box93"></div>
            <div class="box94"></div>
            <div class="box95"></div>
            <div class="box96"></div>
            <div class="box97"></div>
            <div class="box98"></div>
            <div class="box99"></div>
        </div>
    </div>
</body>

</html>